import React from 'react';
import { SearchBar, WhiteSpace, WingBlank } from 'antd-mobile'
import { API } from '../../../utils'
import { BASE_URL } from '../../../utils'

import './index.scss'

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = {
      value: '',  // 搜索框内容
      showList: [],  // 关键词展示小区列表 
    }
  }
  onChange = (value) => {
    console.log(value)
    // 更新搜索框内容
    this.setState({
      value
    })
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      // 获取搜索框下面关键词列表
      this.getShowList(value);
    }, 500)
  }

  // 根据关键词获取小区列表
  getShowList = async (value) => {
    // 获取当前城市id
    let curCity = JSON.parse(localStorage.getItem('hkzf_city'));
    const res = await API.get('/area/community', {
      params: {
        name: value,
        id: curCity.value   //当前城市id
      }
    })
    const data = res.data.body;
    console.log(data);
    if (value) {
      this.setState({
        showList: data,
      })
    } else {
      this.setState({
        showList: [],
      })
    }
  }

  // 关键词列表点击响应
  handleItemClick = item => {
    // console.log('要传递的值：', item);
    this.props.history.replace('/rent/addRent', {
      name: item.communityName,
      id: item.community
    })
  }

  render() {
    return (
      <div>
        {/* 搜索框 */}
        <SearchBar
          value={this.state.value}
          placeholder="请输入小区或地址"
          maxLength={8}
          onChange={this.onChange}
        />

        {/* ShowList的展示 */}
        {/* {this.state.showList.forEach(item => {

        })} */}
        <ul className="ulList">
          {this.state.showList.map(item => {
            return (
              <li onClick={() => this.handleItemClick(item)}>{item.communityName}</li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default Search